<template>      
    <div class="person">
       <h2>当前求和为：{{ sum }}</h2>
       <button @click="add">点我sum+1</button>
    </div>
</template>

<script lang="ts"  setup >
    import  {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

    let sum = ref(0)

    function add()
    {
        sum.value +=1
    }
    //创建
    console.log('创建')

    //挂载
    onBeforeMount(()=>{
        console.log("挂载前")
    })

    onMounted(()=>{
        console.log("子挂载完毕")
    })

    //更新
    onBeforeUpdate(()=>{
        console.log("更新前")
    })

    onUpdated(()=>{
        console.log("更新完毕")
    })

    //卸载
    onBeforeUnmount(()=>{
        console.log("卸载前")
    })

    onUnmounted(()=>{
        console.log("卸载完毕")
    })
</script> 